JavaScript Stream Reader: Ma'lumotlarni asinxron iste'mol qilish

Web Streams API JavaScript-da ma'lumotlar oqimlarini asinxron tarzda boshqarish uchun kuchli mexanizmni taqdim etadi. Ushbu API'ning markazida ma'lumotlar manbasini ifodalovchi ReadableStream interfeysi va ReadableStream'dan ma'lumotlarni iste'mol qilish imkonini beruvchi ReadableStreamReader interfeysi joylashgan. Ushbu keng qamrovli qo'llanma asinxron ma'lumotlarni iste'mol qilishga e'tibor qaratgan holda JavaScript Stream Reader'lar bilan bog'liq tushunchalar, foydalanish va eng yaxshi amaliyotlarni o'rganadi.

Web Streams va Stream Reader'larni tushunish

Web Streams nima?

Web Streams zamonaviy veb-ilovalarida asinxron ma'lumotlarni boshqarishning asosiy qurilish blokidir. Ular butun ma'lumot manbasini yuklashni kutmasdan, ma'lumotlarni mavjud bo'lishi bilan bosqichma-bosqich qayta ishlashga imkon beradi. Bu, ayniqsa, katta fayllar, tarmoq so'rovlari va real vaqtda ma'lumotlar lentalari bilan ishlash uchun foydalidir.

Web Streams'dan foydalanishning asosiy afzalliklari quyidagilardan iborat:

• Yaxshilangan unumdorlik: Ma'lumotlar qismlarini kelishi bilan qayta ishlang, kechikishni kamaytiring va javob berish qobiliyatini yaxshilang.
• Xotira samaradorligi: Katta ma'lumotlar to'plamini butun ma'lumotni xotiraga yuklamasdan boshqaring.
• Asinxron operatsiyalar: Bloklanmaydigan ma'lumotlarni qayta ishlash UI'ning javob berishini ta'minlaydi.
• Piping va transformatsiya: Oqimlarni murakkab ma'lumotlarni qayta ishlash quvurlarini yaratish uchun yo'naltirish va o'zgartirish mumkin.

ReadableStream va ReadableStreamReader

ReadableStream siz o'qishingiz mumkin bo'lgan ma'lumot manbasini ifodalaydi. Uni turli manbalardan, masalan, tarmoq so'rovlari (fetch yordamida), fayl tizimi operatsiyalari yoki hatto maxsus ma'lumot generatorlaridan yaratish mumkin.

ReadableStreamReader bu ReadableStream'dan ma'lumotlarni o'qish imkonini beruvchi interfeys. Turli xil reader turlari mavjud, jumladan:

• ReadableStreamDefaultReader: Bayt oqimlarini o'qish uchun ishlatiladigan eng keng tarqalgan tur.
• ReadableStreamBYOBReader: "O'z buferingizni olib keling" (bring your own buffer) o'qishi uchun ishlatiladi, bu sizga taqdim etilgan buferni to'g'ridan-to'g'ri ma'lumotlar bilan to'ldirish imkonini beradi. Bu ayniqsa nol-nusxali (zero-copy) operatsiyalar uchun samarali.
• ReadableStreamTextDecoder (to'g'ridan-to'g'ri reader emas, lekin bog'liq): Ko'pincha baytlar oqimidan matnli ma'lumotlarni dekodlash uchun reader bilan birgalikda ishlatiladi.

ReadableStreamDefaultReader'dan asosiy foydalanish

Keling, ReadableStream'dan ReadableStreamDefaultReader yordamida ma'lumotlarni o'qishning asosiy misolidan boshlaymiz.

Misol: Fetch javobidan o'qish

Ushbu misol URL'dan ma'lumotlarni qanday qilib fetch qilish va uni oqim sifatida o'qishni ko'rsatadi:

            async function readStreamFromURL(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  try {
    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Oqim tugallandi");
        break;
      }

      // Ma'lumotlar qismini qayta ishlash (value - bu Uint8Array)
      console.log("Qabul qilingan qism:", value);
    }
  } catch (error) {
    console.error("Oqimdan o'qishda xatolik:", error);
  } finally {
    reader.releaseLock(); // Tugagandan so'ng blokirovkani bo'shatish
  }
}

// Foydalanish misoli
readStreamFromURL("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Tushuntirish:

1. fetch(url): Belgilangan URL'dan ma'lumotlarni oladi.
2. response.body.getReader(): Javob tanasidan ReadableStreamDefaultReader oladi.
3. reader.read(): Oqimdan ma'lumotlar qismini asinxron tarzda o'qiydi. done va value xususiyatlariga ega obyektga yechiladigan promise qaytaradi.
4. done: Oqim to'liq o'qilganligini bildiruvchi mantiqiy qiymat.
5. value: Ma'lumotlar qismini o'z ichiga olgan Uint8Array.
6. Tsikl: while tsikli done true bo'lguncha ma'lumotlarni o'qishda davom etadi.
7. Xatoliklarni boshqarish: try...catch bloki oqimni o'qish paytida yuzaga kelishi mumkin bo'lgan xatoliklarni boshqaradi.
8. reader.releaseLock(): Reader'dagi blokirovkani bo'shatadi, bu boshqa iste'molchilarga oqimga kirish imkonini beradi. Bu xotira sizib chiqishining oldini olish va resurslarni to'g'ri boshqarish uchun juda muhim.

for-await-of yordamida asinxron iteratsiya

ReadableStream'dan o'qishning qisqaroq usuli for-await-of tsiklidan foydalanishdir:

            async function readStreamFromURL_forAwait(url) {
  const response = await fetch(url);
  const reader = response.body;

  try {
    for await (const chunk of reader) {
      // Ma'lumotlar qismini qayta ishlash (chunk - bu Uint8Array)
      console.log("Qabul qilingan qism:", chunk);
    }

    console.log("Oqim tugallandi");
  } catch (error) {
    console.error("Oqimdan o'qishda xatolik:", error);
  }
}

// Foydalanish misoli
readStreamFromURL_forAwait("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Bu yondashuv kodni soddalashtiradi va o'qilishini yaxshilaydi. for-await-of tsikli avtomatik ravishda asinxron iteratsiyani va oqimni tugatishni boshqaradi.

ReadableStreamTextDecoder yordamida matnni dekodlash

Ko'pincha sizga baytlar oqimidan matnli ma'lumotlarni dekodlash kerak bo'ladi. TextDecoder API buni samarali boshqarish uchun ReadableStreamReader bilan birgalikda ishlatilishi mumkin.

Misol: Oqimdan matnni dekodlash

            async function readTextFromStream(url, encoding = 'utf-8') {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder(encoding);

  try {
    let accumulatedText = '';
    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Oqim tugallandi");
        break;
      }

      const textChunk = decoder.decode(value, { stream: true });
      accumulatedText += textChunk;
      console.log("Qabul qilingan va dekodlangan qism:", textChunk);
    }
    console.log("Yig'ilgan matn: ", accumulatedText);
  } catch (error) {
    console.error("Oqimdan o'qishda xatolik:", error);
  } finally {
    reader.releaseLock();
  }
}

// Foydalanish misoli
readTextFromStream("https://example.com/text_data.txt", 'utf-8');

            

              
                Copy
              
            
          

Tushuntirish:

1. TextDecoder(encoding): Belgilangan kodirovka ('utf-8', 'iso-8859-1' kabi) bilan TextDecoder ob'ektini yaratadi.
2. decoder.decode(value, { stream: true }): Uint8Array'ni (value) satrga dekodlaydi. { stream: true } opsiyasi qismlarga bo'linib ketishi mumkin bo'lgan ko'p baytli belgilarni boshqarish uchun juda muhim. U chaqiruvlar orasida dekoderning ichki holatini saqlaydi.
3. To'plash: Oqim belgilarni qismlarga bo'lib yetkazib berishi mumkinligi sababli, dekodlangan satrlar to'liq belgilarning qayta ishlanishini ta'minlash uchun accumulatedText o'zgaruvchisiga yig'iladi.

Xatoliklarni boshqarish va oqimni bekor qilish

Oqimlar bilan ishlashda mustahkam xatoliklarni boshqarish muhim. Mana xatoliklarni qanday boshqarish va oqimlarni to'g'ri bekor qilish.

Xatoliklarni boshqarish

Oldingi misollardagi try...catch bloki o'qish jarayonida yuzaga keladigan xatoliklarni boshqaradi. Biroq, siz oqimni yaratishda yoki ma'lumotlar qismlarini qayta ishlashda yuzaga kelishi mumkin bo'lgan xatoliklarni ham boshqarishingiz mumkin.

Oqimni bekor qilish

Ma'lumotlar oqimini to'xtatish uchun oqimni bekor qilishingiz mumkin. Bu sizga ma'lumotlar endi kerak bo'lmaganda yoki tiklab bo'lmaydigan xatolik yuzaga kelganda foydalidir.

            async function cancelStream(url) {
  const controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    const reader = response.body.getReader();

    setTimeout(() => {
      console.log("Oqim bekor qilinmoqda...");
      controller.abort(); // Fetch so'rovini bekor qilish
    }, 5000); // 5 soniyadan keyin bekor qilish

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Oqim tugallandi");
        break;
      }

      // Ma'lumotlar qismini qayta ishlash
      console.log("Qabul qilingan qism:", value);
    }
  } catch (error) {
    console.error("Oqimdan o'qishda xatolik:", error);
    if (error.name === 'AbortError') {
      console.log('Oqim foydalanuvchi tomonidan bekor qilindi');
    }
  } finally {
    // Blokirovkani har doim bo'shatish yaxshi amaliyotdir
    // xatolikdan keyin ham.
    if(reader) {
      reader.releaseLock();
    }
  }
}

// Foydalanish misoli
cancelStream("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Tushuntirish:

1. AbortController: Bekor qilish so'rovini signal qilish imkonini beruvchi AbortController yaratadi.
2. signal: AbortController'ning signal xususiyati fetch opsiyalariga uzatiladi.
3. controller.abort(): abort()'ni chaqirish bekor qilishni signal qiladi.
4. Xatoliklarni boshqarish: catch bloki xatoning AbortError ekanligini tekshiradi, bu oqim bekor qilinganini bildiradi.
5. Blokirovkani bo'shatish: `finally` bloki xotira sizib chiqishining oldini olish uchun xatolik yuzaga kelgan taqdirda ham `reader.releaseLock()` chaqirilishini ta'minlaydi.

ReadableStreamBYOBReader: O'z buferingizni olib keling

ReadableStreamBYOBReader sizga taqdim etilgan buferni to'g'ridan-to'g'ri oqimdan olingan ma'lumotlar bilan to'ldirish imkonini beradi. Bu ayniqsa keraksiz ma'lumotlar nusxalanishini oldini olishni istagan nol-nusxali operatsiyalar uchun foydalidir. E'tibor bering, BYOB reader'lar ularni qo'llab-quvvatlash uchun maxsus ishlab chiqilgan oqimni talab qiladi va barcha `ReadableStream` manbalari bilan ishlamasligi mumkin. Ulardan foydalanish odatda binar ma'lumotlar uchun yaxshiroq unumdorlikni ta'minlaydi.

ReadableStreamBYOBReader'dan foydalanishni ko'rsatish uchun bu (biroz sun'iy) misolni ko'rib chiqing:

            async function readWithBYOB(url) {
  const response = await fetch(url);

  // Oqimning BYOB-mosligini tekshirish.
  if (!response.body.readable || !response.body.readable.pipeTo) {
    console.error("Oqim BYOB-mos emas.");
    return;
  }

  const stream = response.body.readable;

  // Ma'lumotlarni saqlash uchun Uint8Array yaratish.
  const bufferSize = 1024; // Tegishli bufer hajmini aniqlash.
  const buffer = new Uint8Array(bufferSize);

  const reader = stream.getReader({ mode: 'byob' });

  try {
    while (true) {
      const { done, value } = await reader.read(buffer);

      if (done) {
        console.log("BYOB oqimi tugallandi.");
        break;
      }

      // 'value' - bu siz 'read'ga uzatgan bir xil Uint8Array.
      // Faqat ushbu o'qish bilan to'ldirilgan bufer qismi
      // haqiqiy ma'lumotlarni o'z ichiga olishi kafolatlangan. `value.byteLength`ni tekshiring
      // qancha bayt haqiqatda yozilganligini ko'rish uchun.

      console.log(`Buferga ${value.byteLength} bayt o'qildi.`);
      // Buferning to'ldirilgan qismini qayta ishlash. Masalan:
      // for (let i = 0; i < value.byteLength; i++) {
      //   console.log(value[i]); // Har bir baytni qayta ishlash
      // }


    }
  } catch (error) {
    console.error("BYOB oqimini o'qish paytida xatolik:", error);
  } finally {
    reader.releaseLock();
  }
}

// Foydalanish misoli
readWithBYOB("https://example.com/binary_data.bin");
            

              
                Copy
              
            
          

Ushbu misolning asosiy jihatlari:

1. BYOB Mosligi: Barcha oqimlar BYOB reader'larga mos kelmaydi. Sizga odatda bu iste'mol usuli uchun optimallashtirilgan ma'lumotlarni yuborishni tushunadigan va qo'llab-quvvatlaydigan server kerak bo'ladi. Misolda oddiy tekshiruv mavjud.
2. Bufer ajratish: Siz ma'lumotlar to'g'ridan-to'g'ri o'qiladigan bufer vazifasini bajaradigan Uint8Array yaratasiz.
3. BYOB Reader'ni olish: ReadableStreamBYOBReader yaratish uchun `stream.getReader({mode: 'byob'})` dan foydalaning.
4. `reader.read(buffer)`: Yangi massiv qaytaradigan `reader.read()` o'rniga, siz oldindan ajratilgan buferingizni uzatib, `reader.read(buffer)`'ni chaqirasiz.
5. Ma'lumotlarni qayta ishlash: `reader.read(buffer)` tomonidan qaytarilgan `value` *bu* siz uzatgan bir xil buferdir. Biroq, siz faqat buferning `value.byteLength` gacha bo'lgan *qismi* haqiqiy ma'lumotlarga ega ekanligini bilasiz. Haqiqatda qancha bayt yozilganligini kuzatib borishingiz kerak.

Amaliy foydalanish holatlari

1. Katta log fayllarini qayta ishlash

Web Streams katta log fayllarini butun faylni xotiraga yuklamasdan qayta ishlash uchun idealdir. Siz faylni satrma-satr o'qishingiz va har bir satrni mavjud bo'lishi bilan qayta ishlashingiz mumkin. Bu ayniqsa server loglari, dastur loglari yoki boshqa katta matnli fayllarni tahlil qilish uchun foydalidir.

2. Haqiqiy vaqtdagi ma'lumotlar lentalari

Web Streams aktsiyalar narxlari, sensor ma'lumotlari yoki ijtimoiy media yangilanishlari kabi real vaqtda ma'lumotlar lentalarini iste'mol qilish uchun ishlatilishi mumkin. Siz ma'lumot manbasiga ulanish o'rnatishingiz va kelayotgan ma'lumotlarni kelishi bilan qayta ishlashingiz, UI'ni real vaqtda yangilashingiz mumkin.

3. Video striming

Web Streams zamonaviy video striming texnologiyalarining asosiy komponentidir. Siz video ma'lumotlarini qismlarga bo'lib olishingiz va har bir qismni kelishi bilan dekodlashingiz mumkin, bu esa silliq va samarali video ijrosini ta'minlaydi. Bu YouTube va Netflix kabi mashhur video striming platformalari tomonidan qo'llaniladi.

4. Fayl yuklashlar

Web Streams fayl yuklashlarini yanada samaraliroq boshqarish uchun ishlatilishi mumkin. Siz fayl ma'lumotlarini qismlarga bo'lib o'qishingiz va har bir qismni mavjud bo'lishi bilan serverga yuborishingiz mumkin, bu esa mijoz tomonida xotira izini kamaytiradi.

Eng yaxshi amaliyotlar

1. Har doim blokirovkani bo'shating: Xotira sizib chiqishining oldini olish va resurslarni to'g'ri boshqarishni ta'minlash uchun oqim bilan ishingiz tugagach, reader.releaseLock()'ni chaqiring. Xatolik yuzaga kelgan taqdirda ham blokirovka bo'shatilishini kafolatlash uchun finally blokidan foydalaning.
2. Xatoliklarni to'g'ri boshqaring: Oqimni o'qish paytida yuzaga kelishi mumkin bo'lgan xatoliklarni ushlash va boshqarish uchun mustahkam xatoliklarni boshqarishni amalga oshiring. Foydalanuvchiga ma'lumot beruvchi xato xabarlarini taqdim eting.
3. Matnli ma'lumotlar uchun TextDecoder'dan foydalaning: Baytlar oqimidan matnli ma'lumotlarni dekodlash uchun TextDecoder API'dan foydalaning. Ko'p baytli belgilar uchun { stream: true } opsiyasidan foydalanishni unutmang.
4. Binar ma'lumotlar uchun BYOB Reader'larni ko'rib chiqing: Agar siz binar ma'lumotlar bilan ishlayotgan bo'lsangiz va maksimal unumdorlikka muhtoj bo'lsangiz, ReadableStreamBYOBReader'dan foydalanishni ko'rib chiqing.
5. Bekor qilish uchun AbortController'dan foydalaning: Ma'lumotlar endi kerak bo'lmaganda oqimlarni to'g'ri bekor qilish uchun AbortController'dan foydalaning.
6. Tegishli bufer hajmlarini tanlang: BYOB reader'lardan foydalanganda, kutilayotgan ma'lumotlar qismi hajmiga qarab tegishli bufer hajmini tanlang.
7. Bloklovchi operatsiyalardan saqlaning: UI'ni muzlatib qo'ymaslik uchun ma'lumotlarni qayta ishlash mantig'ingiz bloklanmaydigan ekanligiga ishonch hosil qiling. Asinxron operatsiyalarni bajarish uchun async/await'dan foydalaning.
8. Belgilar kodirovkalariga e'tiborli bo'ling: Matnni dekodlashda, buzilgan matnni oldini olish uchun to'g'ri belgi kodirovkasidan foydalanayotganingizga ishonch hosil qiling.

Xulosa

JavaScript Stream Reader'lar zamonaviy veb-ilovalarida asinxron ma'lumotlarni iste'mol qilishni boshqarishning kuchli va samarali usulini taqdim etadi. Ushbu qo'llanmada keltirilgan tushunchalar, foydalanish usullari va eng yaxshi amaliyotlarni tushunib, siz Web Streams'dan foydalanib, ilovalaringizning unumdorligini, xotira samaradorligini va javob berish qobiliyatini yaxshilashingiz mumkin. Katta fayllarni qayta ishlashdan tortib, real vaqtdagi ma'lumotlar lentalarini iste'mol qilishgacha, Web Streams keng ko'lamli ma'lumotlarni qayta ishlash vazifalari uchun ko'p qirrali yechim taklif qiladi. Web Streams API rivojlanishda davom etar ekan, u shubhasiz veb-ishlab chiqish kelajagida tobora muhim rol o'ynaydi.